<template>
    <!-- components/diy/games/games.wxml -->
    <!-- 互动游戏 -->
    <view class="m-decorate-item" v-if="0 < dataList.length">
        <view :class="'m-decorate-game m-decorate-game--' + itemStyle + ' f-clearfix'">
            <view class="game" @tap="navigationTo" :data-url="item.activity_url" v-for="(item, index) in dataList" :key="item.id">
                <view class="game__pic" :style="'background-image: url(' + item.big_pic + ')'" v-if="4 == itemStyle && 0 == index % 3"></view>

                <view class="game__pic" :style="'background-image: url(' + item.big_pic + ')'" v-else></view>

                <view class="game-info f-clearfix">
                    <view class="game-title-wrap onelist-hidden" v-if="3 == itemStyle">
                        <text class="dy-iconfont icon-game" :style="'color: ' + style.color"></text>
                        <text class="game__title">{{ item.title }}</text>
                    </view>
                    <view class="game__title onelist-hidden" v-else>{{ item.title }}11111111</view>
                    <view class="game__desc col-9 onelist-hidden" v-if="3 == itemStyle">{{ item.desc }}</view>
                    <view class="game__draw-btn" :style="'background: ' + style.background">去抽奖</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// components/diy/games/games.js
const app = getApp();
export default {
    data() {
        return {};
    },
    /**
     * 组件的属性列表
     */
    props: {
        itemStyle: String,
        dataList: Array,
        style: {
            type: Object,
            default: () => ({
                background: '#ff495e',
                color: '#ff495e'
            })
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        /**
         * 跳转到指定页面
         */
        navigationTo: function (e) {
            app.navigationTo(e.currentTarget.dataset.url);
        }
    }
};
</script>
<style lang="scss">
@import '@/utils/common.scss'; /* components/diy/games/games.wxss */

.m-decorate-game {
    overflow: hidden;
}

.m-decorate-game .game {
    box-sizing: border-box;
}

.game__link {
    display: block;
}

.m-decorate-game--1 .game {
    width: 32%;
    height: 350rpx;
    background: #fefafa;
    padding: 10rpx 10rpx 20rpx;
    margin-left: 1%;
    margin-bottom: 8rpx;
    float: left;
}

.m-decorate-game--1 .game__pic {
    width: 100%;
    height: 218rpx;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.m-decorate-game--1 .game__title {
    font-size: 27rpx;
    font-weight: 400;
    color: $uni-text-color;
    margin-top: 15rpx;
}

.m-decorate-game--1 .game__draw-btn {
    width: 130rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    text-align: center;
    font-weight: 400;
    color: $uni-text-color-inverse;
    border-radius: 20rpx;
    margin-top: 15rpx;
}

.m-decorate-game--2 .game {
    width: 47%;
    background: #fefafa;
    padding: 20rpx 10rpx 20rpx 20rpx;
    margin-left: 2%;
    margin-bottom: 25rpx;
    float: left;
}

.m-decorate-game--2 .game__pic {
    width: 142rpx;
    height: 142rpx;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5rpx;
    margin-right: 10rpx;
    float: right;
}

.m-decorate-game--2 .game-info {
    width: 48%;
    padding-top: 20rpx;
    float: left;
}

.m-decorate-game--2 .game__title {
    font-size: 27rpx;
    font-weight: 400;
    color: $uni-text-color;
}

.m-decorate-game--2 .game__draw-btn {
    width: 130rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 21rpx;
    text-align: center;
    font-weight: 400;
    color: $uni-text-color-inverse;
    border-radius: 20rpx;
    margin-top: 15rpx;
}

.m-decorate-game--3 {
    padding: 0 20rpx;
}

.m-decorate-game--3 .game {
    width: 100%;
    height: 180rpx;
    box-shadow: 0px 4px 4px 0px #ccc;
    border: 1px solid rgba(204, 204, 204, 0.3);
    border-radius: 10rpx;
    background: #fefafa;
    padding: 24rpx 15rpx 20rpx 20rpx;
    margin-bottom: 20rpx;
    position: relative;
}

.m-decorate-game--3 .game__pic {
    width: 130rpx;
    height: 130rpx;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10rpx;
    float: left;
}

.m-decorate-game--3 .game-info {
    width: 300rpx;
    float: left;
    margin-left: 25rpx;
}

.m-decorate-game--3 .game-title-wrap {
    line-height: 34rpx;
}

.m-decorate-game--3 .dy-iconfont {
    vertical-align: middle;
}

.m-decorate-game--3 .game__title {
    font-size: 29rpx;
    font-weight: 500;
    vertical-align: middle;
    margin-left: 5rpx;
}

.m-decorate-game--3 .game__desc {
    font-size: 21rpx;
    font-weight: 400;
    margin-top: 20rpx;
}

.m-decorate-game--3 .game__draw-btn {
    width: 156rpx;
    height: 48rpx;
    line-height: 48rpx;
    font-size: 28rpx;
    text-align: center;
    font-weight: 400;
    color: $uni-text-color-inverse;
    border-radius: 24rpx;
    position: absolute;
    top: 24rpx;
    right: 15rpx;
}

.m-decorate-game--4 .game {
    width: 47%;
    height: 180rpx;
    background: #fefafa;
    border-radius: 0.5rpx;
    padding: 24rpx 15rpx 20rpx 20rpx;
    margin-left: 2%;
    margin-bottom: 14rpx;
    float: left;
}

.m-decorate-game--4 .game:nth-child(3n + 1) {
    height: 370rpx;
    padding: 20rpx 30rpx;
    margin-bottom: 20rpx;
}

.m-decorate-game--4 .game:nth-child(3n) {
    margin-bottom: 20rpx;
}

.m-decorate-game--4 .game__pic {
    width: 142rpx;
    height: 142rpx;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5rpx;
    margin-right: 10rpx;
    float: right;
}

.m-decorate-game--4 .game:nth-child(3n + 1) .game__pic {
    width: 100%;
    height: 200rpx;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0;
    float: none;
}

.m-decorate-game--4 .game-info {
    width: 48%;
    padding-top: 20rpx;
    float: left;
}

.m-decorate-game--4 .game:nth-child(3n + 1) .game-info {
    width: 100%;
    text-align: center;
    padding-top: 0rpx;
    margin-top: 30rpx;
    float: none;
}

.m-decorate-game--4 .game__title {
    font-size: 27rpx;
    font-weight: 400;
    color: $uni-text-color;
}

.m-decorate-game--4 .game__draw-btn {
    width: 130rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 21rpx;
    text-align: center;
    font-weight: 400;
    color: $uni-text-color-inverse;
    border-radius: 20rpx;
    margin-top: 15rpx;
}

.m-decorate-game--4 .game:nth-child(3n + 1) .game__draw-btn {
    width: 150rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 28rpx;
    text-align: center;
    font-weight: 400;
    color: $uni-text-color-inverse;
    border-radius: 20rpx;
    margin-top: 25rpx;
    display: inline-block;
}
</style>
